<%--
  Created by IntelliJ IDEA.
  User: acoffee
  Date: 2021/10/29
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>用户注册_蜗牛图书商城</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-2.0.3.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
    <script type="text/javascript">


        function change() {
            var date = new Date();
            $("#changeCode").attr("src", "${pageContext.request.contextPath}/checkCodeServlet?id=" + date.getTime());
        }

        var CheckUsername;

        function checkUsername() {
            $("#usernamemsg").html("");

            var username = $("#username").val();
            if (username) {//用户名不为空
                $.post("${pageContext.request.contextPath}/user/checkUsername", "username=" + username, function (data) {
                    if (data.flag && (/^[\w\u4E00-\u9FA5]{2,20}$/.test(username))) {
                        $("#usernamemsg").html(data.msg);
                        CheckUsername = true;
                    } else {
                        if (!(/^[\w\u4E00-\u9FA5]{2,20}$/.test(username))) {
                            $("#usernamemsg").html("<font color='red'>用户名不符合规范！</font>");
                        } else {
                            $("#usernamemsg").html(data.msg);
                        }
                        CheckUsername = false;
                    }
                }, "json");
            } else {
                //用户名为空
                $("#usernamemsg").html("<font color='red'>用户名不能为空</font>");
                CheckUsername = false;
            }

            return CheckUsername;
        }

        var CheckPassword;

        function checkPassword() {
            var password = $("#password").val();
            if (/^[\w\u4E00-\u9FA5]{2,20}$/.test(password)) {

                $("#pwmes").html("<font color='green'>密码可用!</font>");
                CheckPassword = true;
            } else if (password.length == 0) {
                $("#pwmes").html("<font color='red'>密码不能为空!</font>");
                CheckPassword = false;
            } else {
                $("#pwmes").html("<font color='red'>密码不可用!</font>");
                CheckPassword = false;
            }
            return CheckPassword;
        }

        var CheckRepassword;

        function checkRepassword() {
            var repassword = $("#repassword").val();
            var password = $("#password").val();
            if (repassword != password) {
                $("#rpwmes").html("<font color='red'>两次密码不一致！</font>");
                CheckRepassword = false;
            } else if (repassword.length == 0) {
                $("#rpwmes").html("<font color='red'>不能为空！</font>");
                CheckRepassword = false;
            } else {
                $("#rpwmes").html("<font color='green'>正确！</font>");
                CheckRepassword = true;
            }
        }

        var CheckEmail;

        function checkEmail() {
            var email = $("#email").val();
            if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(email)) {
                $("#emailmes").html("<font color='green'>该邮箱可用!</font>");
                CheckEmail = true;
            } else {
                $("#emailmes").html("<font color='red'>邮箱格式错误!</font>");
                CheckEmail = false;
            }
            return CheckEmail;
        }

        var CheckCode;
        function checkCode() {

            $("#picmes").html("");

            var code = $("#code").val();
            if (code) {//用户名不为空
                $.post("${pageContext.request.contextPath}/user/checkCode", "code=" + code, function (data) {
                    if (data.flag) {
                        $("#picmes").html(data.msg);
                        CheckCode = true;
                    } else {
                        $("#picmes").html(data.msg);
                        CheckCode = false;
                    }
                }, "json");
            } else {
                //用户名为空
                $("#picmes").html("<font color='red'>验证码不能为空！</font>");
                CheckCode = false;
            }
            return CheckCode;
        }

        function regist() {
            if (CheckUsername && CheckPassword && CheckRepassword && CheckEmail && CheckCode) {
                return true;
            } else {
                return false;
            }
        }

    </script>
</head>
<body>
<div class="brand_list container_2">
    <div class="header">
        <h1 class="logo">
            <a title="" style="background:url(${pageContext.request.contextPath}/images/logo.png);"
               href="${pageContext.request.contextPath}/pages/index.jsp">电子商务平台</a>
        </h1>
        <ul class="shortcut">
            <li class="first"><a href="${pageContext.request.contextPath}/pages/personal.jsp">个人中心</a></li>
            <li><a href="${pageContext.request.contextPath}/pages/myOrders.jsp">我的订单</a></li>
        </ul>
        <p class="loginfo">


            [<a href="${pageContext.request.contextPath}/pages/login.jsp">登录</a>
            <a class="reg" href="${pageContext.request.contextPath}/pages/register.jsp">免费注册</a>]

        </p>
    </div>
    <div class="wrapper clearfix">
        <div class="wrap_box">
            <h3 class="notice">用户注册</h3>
            <p class="tips">
					<span class="gray f_r">请点<a
                            class="orange bold" href="${pageContext.request.contextPath}/pages/login.jsp">这里</a>登录
					<%--</span>欢迎来到我们的网站，如果您是新用户，请填写下面的表单进行注册--%>
            </p>
            <div class="box clearfix">
                <form action='${pageContext.request.contextPath}/user/register' method="post"
                      onsubmit="return regist()">
                    <input type="hidden" name="opr" value="register"/>
                    <table class="form_table f_l">
                        <col width="260px"/>
                        <col/>
                        <tr>
                            <th>用户名：</th>
                            <td><input class="gray" name='username' id="username" onblur="checkUsername()"
                                       type="text" value="" tabindex="1"/><label id="usernamemsg">请填写用户名，格式为2-20个字符，可以为字母、数字、下划线和中文</label>
                            </td>
                        </tr>
                        <tr>
                            <th>设置密码：</th>
                            <td><input class="gray" type="password" name='password' id="password"
                                       onblur="checkPassword()"
                                       tabindex="2"/><label id="pwmes">填写登录密码，2-32个数字、字母字符</label></td>
                        </tr>
                        <tr>
                            <th>确认密码：</th>
                            <td><input class="gray" type="password" name='repassword' id="repassword"
                                       onblur="checkRepassword()"
                                       tabindex="3"/><label id="rpwmes">重复上面所填写的密码</label></td>
                        </tr>
                        <tr>
                            <th>电子邮箱：</th>
                            <td><input class="gray" name='email' type="text" onblur="checkEmail()"
                                       tabindex="5" id="email"><label id="emailmes">请填写正确的邮箱地址，该邮箱用于激活账号</label></td>
                        </tr>
                        <tr>
                            <th>验证码：</th>
                            <td><input type='text' class='gray_s' name='captcha' onblur="checkCode()"
                                       alt='填写下面图片所示的字符' id="code"/> <label id="picmes">填写下面图片所示的字符</label></td>
                        </tr>
                        <tr class="low">
                            <th></th>
                            <td><img src='${pageContext.request.contextPath}/checkCodeServlet' onclick="change()"
                                     id="changeCode"/> <span
                                    class="light_gray"> 看不清？ <a href="javascript:void(0)" onclick="change()"
                                                                id="change"> 换一张</a> </span></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input class="submit_reg" type="submit"
                                       value="同意一下条款，提交"/><label></label></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <div class="footer">
        <p class="links">
            <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a
                href="">购买流程</a>|<a href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
        </p>
    </div>
</div>
</body>
</html>
